<div id="wizardUserPage" data-role="page" class="page standalonePage wizardPage">
    <div class="padded-left padded-right padded-top">
        <div class="ui-corner-all ui-shadow wizardContent">
            <form class="wizardUserForm">
                <div class="verticalSection">
                    <h1 class="sectionTitle">${TellUsAboutYourself}</h1>
                    <p style="margin-top:2em;">${UserProfilesIntro}</p>
                    <br />
                    <div class="inputContainer">
                        <input is="emby-input" type="text" id="txtUsername" label="${LabelUsername}" required="required" />
                        <div class="fieldDescription">${SelectAdminUsername}</div>
                    </div>
                    <div class="inputContainer">
                        <input is="emby-input" id="txtManualPassword" type="password" label="${LabelPassword}" required="required" />
                        <div class="fieldDescription">${PasswordRequiredForAdmin}</div>
                    </div>
                    <div class="inputContainer">
                        <input is="emby-input" id="txtPasswordConfirm" type="password" label="${LabelPasswordConfirm}" required="required" />
                    </div>
                    <p>${MoreUsersCanBeAddedLater}</p>
                </div>

                <div class="wizardNavigation">
                    <button is="emby-button" type="button" class="raised button-cancel" onclick="history.back();">
                        <span class="material-icons arrow_back" aria-hidden="true"></span>
                        <span>${Previous}</span>
                    </button>
                    <button is="emby-button" type="submit" class="raised button-submit">
                        <span>${Next}</span>
                        <span class="material-icons arrow_forward" aria-hidden="true"></span>
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
